function Tab(el){
    // 构造函数中的this === 实例化对象 也就是tab1 tab2
    this.el = document.querySelector(el)
    this.init()
}
Tab.prototype.init = function(){
    // this tab1/tab2
    // this.功能()
    // .....
    this.titleOver()
}
Tab.prototype.titleOver = function(){
    // 1.获取所有标题(ul li标签)
    let ulLiObjs = this.el.querySelectorAll('ul li')
    // 2.遍历
    ulLiObjs.forEach((item,i)=>{// item是每个li js标签对象  i就是他对应的索引
        // 3.挨个绑定鼠标移入事件
        item.onmouseover = ()=>{// this  父function中的this tab1/tab2
            // 4 事件处理函数中 - 把ul li有class的移除
            this.el.querySelector('ul li.active').className = ''
            // 5 事件处理函数中 - 给当前移入的li增加class
            item.className = 'active'

            // 6 事件处理函数中 - 同步内容
            // 6.1 获取选中的内容移除class
            // this.el.querySelector('ol li.active').className = ''
            // 6.2 给当前对应的加class
            // this.el.querySelectorAll('ol li')[i].className = 'active'
            // 7 同步内容   this==tab1/tab2
        this.changeconcent(i)
        }
        Tab.prototype.changeconcent = function(i){
            // this tab1/tab2
            // 7.1 清除ol li 有class
            this.el.querySelector('ol li.active').className = ''
            // 7.2 当前移入的li 对应的内容增加class
            this.el.querySelectorAll('ol li')[i].className = 'active'
        }
    })
}
